<template>
  <div class="app-container">
    <Ht-search-form
      v-show="showSearch"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :dictMap="dictMap"
      :advOptions="[]"
      permission="user:onlineInfo:view"
    ></Ht-search-form>

    <ht-table
      ref="dataTable"
      :multi-select="true"
      :queryParams="queryParams"
      :dictMap="dictMap"
      :tableBindColumns="tableBindColumns"
      :opButtonList="opButtonList"
      :reqConfig="reqConfig"
      @handleSelectionChange="handleSelectionChange"
    >
      <template v-slot:operate>
        <el-table-column
          :label="$t('common.operation')"
          align="left"
          width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleLogout(scope.row)"
              >{{ $t("authority.onlineInfo.form.forcedExit") }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </ht-table>
  </div>
</template>

<script>
import {
  apiUrlConfig,
  listOnLineInfo,
  forceLogout,
} from "@/api/authority_app/monitoring/onlineInfo";
import { listPageMixin } from "@/libs/listPageMixin";

export default {
  name: "loginInfo",
  mixins: [listPageMixin],
  components: {},
  data() {
    return {
      // 查询参数
      queryParams: {
        orderByColumn: "",
        isAsc: "asc",
        loginName: "",
        deptName: "",
        ipaddr: "",
      },
      searchFormDictList: [],
      opButtonList: () => {
        return [
          {
            label: this.$t("authority.onlineInfo.form.forcedExit"),
            type: "danger",
            icon: "el-icon-delete",
            permission: "",
            disabled: this.ids.length < 1,
            clickFun: () => {
              this.batchForceLogout();
            },
          },
        ];
      },
      reqConfig: apiUrlConfig,
      // 列信息
      tableBindColumns: [
        {
          label: this.$t("authority.onlineInfo.form.sessionId"),
          prop: "sessionId",
        },
        {
          label: this.$t("authority.onlineInfo.form.loginName"),
          prop: "loginName",
        },
        {
          label: this.$t("authority.onlineInfo.form.deptName"),
          prop: "deptName",
        },
        { label: this.$t("authority.onlineInfo.form.ipaddr"), prop: "ipaddr" },
        {
          label: this.$t("authority.onlineInfo.form.browser"),
          prop: "browser",
        },
        { label: this.$t("authority.onlineInfo.form.os"), prop: "os" },
        {
          label: this.$t("authority.onlineInfo.form.startTimestamp"),
          prop: "startTimestamp",
          width: "180",
        },
        {
          label: this.$t("authority.onlineInfo.form.lastAccessTime"),
          prop: "lastAccessTime",
          width: "180",
        },
      ],
      formOptions: [],
    };
  },
  mounted() {
    const formOptions = [
      {
        type: "input",
        prop: "loginName",
        defaultAttr: {
          size: "small",
          label: this.$t("authority.onlineInfo.form.loginName"),
          placeholder: this.$t("authority.onlineInfo.rules.loginNamePLH"),
        },
      },
      {
        type: "input",
        prop: "deptName",
        defaultAttr: {
          size: "small",
          label: this.$t("authority.onlineInfo.form.deptName"),
          placeholder: this.$t("authority.onlineInfo.rules.deptNamePLH"),
        },
      },
      {
        type: "input",
        prop: "ipaddr",
        defaultAttr: {
          size: "small",
          label: this.$t("authority.onlineInfo.form.loginAddress"),
          placeholder: this.$t("authority.onlineInfo.rules.loginAddressPLH"),
        },
      },
    ];
    this.formOptions = formOptions;
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.sessionId);
      this.$refs.dataTable.genQuickButtonList(this.opButtonList());
    },
    //强退
    handleLogout(row) {
      const dictIds = row.sessionId;
      this.$confirm(
        this.$t("authority.onlineInfo.rules.logoutTip"),
        this.$t("authority.onlineInfo.form.warning"),
        {
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      )
        .then(function () {
          return forceLogout(dictIds);
        })
        .then(() => {
          this.doQuery();
          this.msgSuccess(this.$t("authority.onlineInfo.rules.offlineSuccess"));
        })
        .catch((action) => {});
    },
    //批量强退
    batchForceLogout() {
      const dictIds = this.ids;
      this.$confirm(
        this.$t("authority.onlineInfo.rules.forceTip"),
        this.$t("authority.onlineInfo.form.warning"),
        {
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      )
        .then(function () {
          return forceLogout(dictIds);
        })
        .then(() => {
          this.doQuery();
          this.msgSuccess(this.$t("authority.onlineInfo.rules.offlineSuccess"));
        })
        .catch((action) => {});
    },
  },
};
</script>
